<template>
  <div>
    我是Child
    <!-- 1. 父组件以标签属性的方式给子组件传递数据 -->
    <Child :num="num" :person="person" />

    <Son :num="num" :setNum="setNum" />
  </div>
</template>

<script>
import Child from "./Child.vue";
import Son from "./Son.vue";
/*
  props
    功能：父子组件传递数据
      父 -> 子 传递普通数据
      子 -> 父 （父组件传递函数给子组件，子组件调用函数从而修改父组件数据）

    使用：
      1. 父组件以标签属性方式传递数据给子组件
        <Child :xxx="xxx" />
      2. 子组件声明接受数据（三种方式）
        props: ['xxx']
        props: { xxx: Number }
        props: { xxx: { type: Number, required: true } }
      3. 子组件使用数据
        this.xxx

    特点：只读的，不能直接修改。（想要修改 1. 先在数据源定义更新数据方法 2. 再将方法传递过来从而调用方法修改数据）
*/
export default {
  name: "App",
  data() {
    return {
      num: 0,
      person: {
        name: "kangkang",
        age: 18,
      },
    };
  },
  methods: {
    // 再数据源定义更新数据的方法
    setNum() {
      this.num++;
    },
  },
  components: {
    Child,
    Son,
  },
};
</script>

<style></style>

